<script setup lang="ts">
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});
import axios from "axios";
import BackTop from "@/components/BackTop/index.vue";
import { useUserStore } from "@/store/modules/user";
import { formatDate } from "@/utils/formatTime";
import { Operation, TeamMembers } from "@/utils/dashboard";

const qqQun = ref(
  new URL(`../../assets/images/qq_qun.jpg`, import.meta.url).href
);

const appreciate = ref(
  new URL(`../../assets/images/appreciate.png`, import.meta.url).href
);

// 用户信息
const userStore = useUserStore();
const drawer = ref(false);
const previewURL = ref();
// 诗词请求格式
const poetryInfo = ref({
  from: "",
  from_who: "",
  hitokoto: "",
});
// 日期
const date: Date = new Date();
// 判断时间信息
const greetings = computed(() => {
  if (date.getHours() >= 6 && date.getHours() < 8) {
    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
  } else if (date.getHours() >= 8 && date.getHours() < 12) {
    return "上午好🌞！";
  } else if (date.getHours() >= 12 && date.getHours() < 18) {
    return "下午好☕！";
  } else if (date.getHours() >= 18 && date.getHours() < 24) {
    return "晚上好🌃！";
  } else if (date.getHours() >= 0 && date.getHours() < 6) {
    return "晨兴理荒秽，带月荷锄归，晚安🌛！";
  }
});
// 文档预览
function preview(link: string) {
  drawer.value = true;
  previewURL.value = link;
}
// 关闭弹窗
function handClose() {
  drawer.value = false;
  previewURL.value = "";
}
// 诗词
function handPoetry() {
  axios.get("https://v1.hitokoto.cn/?c=i&encode=json").then(({ data }) => {
    poetryInfo.value.hitokoto = data.hitokoto;
    poetryInfo.value.from_who = data.from_who;
    poetryInfo.value.from = data.from;
  });
}
// 进来就搜
onMounted(() => {
  handPoetry();
});
</script>

<template>
  <div class="dashboard-container">
    <!-- 用户信息 -->
    <el-row class="mb-8">
      <el-card :bordered="false" class="w-full">
        <template #header>
          <div class="card-header">
            <svg-icon
              icon-class="gongzuotai_work"
              class="mr-10px"
              style="
                font-size: 30px;
                font-weight: bold;
                text-align: center;
                vertical-align: middle;
              "
            />
            <span style="text-align: center; vertical-align: middle">{{
              $t("home.Werkbank")
            }}</span>
          </div>
        </template>
        <div class="flex justify-between flex-wrap">
          <div class="flex items-center">
            <div>
              <img
                class="user-avatar"
                :src="userStore.avatar"
                style="width: 60px; height: 60px"
              />
            </div>
            <div>
              <p class="px-4 text-xl" style="font-size: 18px">
                {{ userStore.nickname }}，{{ $t("home.Willkommen") }}
              </p>
              <p class="px-4 text-gray-400" style="font-size: 14px">
                {{
                  poetryInfo.hitokoto +
                  "&nbsp;—— " +
                  (poetryInfo.from_who ? poetryInfo.from_who : "未知") +
                  "《" +
                  poetryInfo.from +
                  "》"
                }}
              </p>
            </div>
          </div>

          <div class="flex h-60px items-center justify-end lt-sm:mt-20px">
            <div class="leading-[40px]">
              {{ greetings }}
            </div>
          </div>
        </div>
      </el-card>
    </el-row>

    <el-row class="mt-20px" :gutter="20" justify="space-between">
      <el-col :span="16">
        <el-card shadow="never" style="height: 380px">
          <template #header>
            <div class="card-header">
              <svg-icon
                icon-class="caozuo_work"
                class="mr-10px"
                style="
                  margin-right: 10px;
                  font-size: 30px;
                  font-weight: bold;
                  text-align: center;
                  vertical-align: middle;
                "
              />
              <span style="text-align: center; vertical-align: middle"
                >{{ $t("home.Bedienungsanleitung")
                }}<a
                  href="https://www.bilibili.com/video/BV1Eu411K7eW/?share_source=copy_web&vd_source=9368277bc4902eade497a80f4856b58d"
                  target="_blank"
                  style="color: var(--el-color-primary)"
                  >{{ $t("home.Video") }}</a
                >
              </span>
            </div>
          </template>
          <el-row>
            <el-col
              v-for="(item, index) in Operation"
              :key="`card-${index}`"
              :xl="8"
              :lg="8"
              :md="12"
              :sm="24"
              :xs="24"
              style="cursor: pointer"
              @click="preview(item.link)"
            >
              <el-card shadow="hover">
                <div class="flex items-center">
                  <svg-icon
                    :icon-class="item.icon"
                    class="mr-10px"
                    style="margin-right: 5px; font-size: 18px"
                  />
                  <span class="text-16px">{{ item.title }}</span>
                </div>
                <div class="mt-15px text-14px text-gray-400">
                  {{ item.introduction }}
                </div>
                <div
                  class="mt-20px text-12px text-gray-400 flex justify-between"
                >
                  <span> {{ item.subtitle }}</span>
                  <span>{{ formatDate(new Date()) }}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <img
            src="@/assets/images/Business.svg"
            class="w-full"
            style="height: 330px"
          />
        </el-card>
      </el-col>
    </el-row>

    <el-row class="mt-20px" :gutter="20" justify="space-between">
      <el-col>
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <svg-icon
                icon-class="tuandui_work"
                class="mr-10px"
                style="
                  margin-right: 10px;
                  font-size: 30px;
                  font-weight: bold;
                  text-align: center;
                  vertical-align: middle;
                "
              />
              <span style="text-align: center; vertical-align: middle">{{
                $t("home.Teammitglieder")
              }}</span>
            </div>
          </template>
          <el-row>
            <el-col
              v-for="(item, index) in TeamMembers"
              :key="`card-${index}`"
              :xl="6"
              :lg="6"
              :md="12"
              :sm="24"
              :xs="24"
              style="cursor: pointer"
            >
              <el-card shadow="hover">
                <div class="flex items-center">
                  <svg-icon
                    :icon-class="item.icon"
                    class="mr-10px"
                    style="
                      margin-right: 5px;
                      font-size: 28px;
                      font-weight: bold;
                    "
                  />
                  <span class="text-16px">{{ item.Name }}</span>
                </div>
                <div class="mt-15px text-14px text-gray-400">
                  {{ item.Major }}
                </div>
                <div
                  class="mt-20px text-12px text-gray-400 flex justify-between"
                >
                  <span> {{ item.Role }}</span>
                  <span>{{ "2023-08-18 17:08:20" }}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row class="mt-20px" :gutter="20">
      <el-col :span="5">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <svg-icon
                icon-class="qq_qun"
                class="mr-10px"
                style="
                  margin-right: 10px;
                  font-size: 30px;
                  font-weight: bold;
                  text-align: center;
                  vertical-align: middle;
                "
              />
              <span style="text-align: center; vertical-align: middle">{{
                $t("home.Austausch")
              }}</span>
            </div>
          </template>
          <el-image :src="qqQun"> </el-image>
        </el-card>
      </el-col>

      <el-col :span="5">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <svg-icon
                icon-class="appreciate"
                class="mr-10px"
                style="
                  margin-right: 10px;
                  font-size: 30px;
                  font-weight: bold;
                  text-align: center;
                  vertical-align: middle;
                "
              />
              <span style="text-align: center; vertical-align: middle">{{
                $t("home.appreciate")
              }}</span>
            </div>
          </template>
          <el-image :src="appreciate"> </el-image>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <svg-icon
                icon-class="project"
                class="mr-10px"
                style="
                  margin-right: 10px;
                  font-size: 30px;
                  font-weight: bold;
                  text-align: center;
                  vertical-align: middle;
                "
              />
              <span style="text-align: center; vertical-align: middle">{{
                $t("home.project")
              }}</span>
            </div>
          </template>
          <span> 项目前端即将开源，敬请期待，赞赏越多，开的越快 </span>
          <!-- <span> https://gitee.com/xu-yunlong123567/dahe-edu-vue.git </span> -->
        </el-card>
      </el-col>
    </el-row>

    <el-drawer
      v-model="drawer"
      :with-header="false"
      size="45%"
      @close="handClose"
    >
      <iframe id="iframe" :src="previewURL" style="width: 100%; height: 100vh">
      </iframe>
    </el-drawer>
    <back-top></back-top>
  </div>
</template>

<style lang="scss" scoped>
p {
  padding: 0;

  margin-right: 2px;
  margin-top: 6px;
  margin-bottom: 2px;
  margin-left: 20px;
}
.dashboard-container {
  position: relative;
  padding: 24px;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }
}
</style>
